<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>firststone</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html,
    body,
    #app {
      margin: 0px;
      padding: 0px;
      width: 100%;
    }

    html {
      /* 100vw 等于 视图宽度 */
      font-size: 100px;
      /* 100 / 設計稿寬度 * 100 */
    }

    ul,
    li {
      list-style: none;
    }

    .header {
      position: relative;
      width: 100%;
      background-color: #1c42b6;
    }

    .header .title {
      flex: 1;
      margin: 0;
      line-height: 1;
      text-align: center;
      font-size: 0.48rem;
      padding: 10px;
      color: #fff;
    }

    .nav {
      font-size: 0.32rem;
    }

    ul {
      width: 60%;
      margin: 20px auto 0;
      display: flex;
      justify-content: space-around;
    }

    .current {
      font-weight: bold;
      color: #409eff;
    }

    .current:after {
      content: '';
      display: block;
      height: 4px;
      margin-top: 5px;
      background: #409eff;
      border-radius: 4px;
    }

    .content {
      font-size: 0.32rem;
    }

    .content>div {
      display: none;
    }

    .content .active {
      display: block;
    }

    .content .base, .content .deposit {
      padding: 0.13rem 0.27rem;
    }

    .dg.ac {
      display: none
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="header">
      <p class="title">
        斑岩型铜矿石
      </p>
    </div>
    <div class="nav">
      <ul>
        <li class="current">3D模型</li>
        <li>基本信息</li>
        <li>矿床信息</li>
      </ul>
    </div>
    <div class="content">
      <div class="model active">
        <div id="container"></div>
      </div>
      <div class="base">
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本编号：</span><span
            style="font-family:微软雅黑;font-size:7px">DBB01</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本中文名称：</span><span
            style="font-family:微软雅黑;font-size:7px">斑岩型铜矿石</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本外文名称：</span><span
            style="font-family:微软雅黑;font-size:7px">Porphyry Copper Ore</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">具体产地：</span><span
            style="font-family:微软雅黑;font-size:7px">拉萨市墨竹工卡县知不拉铜矿</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">省：</span><span
            style="font-family:微软雅黑;font-size:7px">西藏自治区</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">国家：</span><span
            style="font-family:微软雅黑;font-size:7px">中国</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">采集的经度：</span><span
            style="font-family:微软雅黑;font-size:7px">E91°35＇30＂</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">采集的纬度：</span><span
            style="font-family:微软雅黑;font-size:7px">N29°42＇36＂</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">采集的高程：</span><span
            style="font-family:微软雅黑;font-size:7px">5500m</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">地质产状或层位：</span><span
            style="font-family:微软雅黑;font-size:7px">产于角岩化凝灰岩和大理岩的岩性界面处</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">主要用途：</span><span
            style="font-family:微软雅黑;font-size:7px">科学研究</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">特征描述：</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span
            style="font-family:微软雅黑;font-size:7px">矿石呈粒状结构，条带状、脉状、浸染状构造。主要矿石矿物为铜黄色黄铜矿和暗铜红色斑铜矿（表面铜蓝锖色），含有少量黄铁矿、辉钼矿、磁铁矿、方铅矿、蓝铜矿、褐铁矿等。主要脉石矿物为石榴子石、透辉石，含绿帘石、硅灰石、方解石、石英、透闪石、阳起石、符山石、绿泥石、绢云母等。</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本提供者：</span><span
            style="font-family:微软雅黑;font-size:7px">西藏巨龙铜业有限公司</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本提供时间：</span><span
            style="font-family:微软雅黑;font-size:7px">20220920</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">保存单位：</span><span
            style="font-family:微软雅黑;font-size:7px">国家岩矿化石标本资源库</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">保持位置号：</span><span
            style="font-family:微软雅黑;font-size:7px"><span style="font-family:微软雅黑">金石坪</span>04</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本保存类型：</span><span
            style="font-family:微软雅黑;font-size:7px">标本</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本保存数量：</span><span
            style="font-family:微软雅黑;font-size:7px">1</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">规格：</span><span
            style="font-family:微软雅黑;font-size:7px"><span style="font-family:微软雅黑">长</span>x宽x高：100cmx80cmx222cm</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">标本状态：</span><span
            style="font-family: 微软雅黑;font-size: 7px">完好</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">备注：</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">矿石颜色：</span><span
            style="font-family:微软雅黑;font-size:7px">灰黑色</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">矿石结构：</span><span
            style="font-family:微软雅黑;font-size:7px">粒状结构</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">矿石构造：</span><span
            style="font-family:微软雅黑;font-size:7px">条带状构造、脉状构造、浸染状构造</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">矿石的矿物组成：</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span
            style="font-family:微软雅黑;font-size:7px">矿石矿物：以蓝铜矿、黄铜矿、斑铜矿为主，磁铁矿、辉钼矿、黄铁矿褐铁矿、方铅矿、闪锌矿次之，另见少量辉铜矿、赤铁矿、毒砂等。</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span
            style="font-family:微软雅黑;font-size:7px">脉石矿物：以石榴子石、透辉石为主，绿帘石、硅灰石、方解石、石英次之，另见少量透闪石、阳起石、符山石、绿泥石、绢云母等。</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;font-size:7px">元素的赋存状态及分配：铜、钼、铅、锌主要以硫化物黄铜矿、辉钼矿、方铅矿、闪锌矿形式赋存，金以自然金的形式赋存。</span>
        </p>
        <p style="text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;color:rgb(84,141,212);font-size:7px">矿石的化学组成：</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;font-size:7px">主要有用组分（元素或化合物）：铜</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;font-size:7px">伴生有用组分（元素或化合物）：钼、铅、锌、金、银</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;font-size:7px">有害组分（元素或化合物）：硫</span>
        </p>
        <p style="text-indent:13px;text-align:justify;text-justify:inter-ideograph">
          <span style="font-family:微软雅黑;font-size:7px"></span><br />
        </p>
        <p>
          <br />
        </p>
      </div>
      <div class="deposit">
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">矿床名称：</span><span
            style="font-family:微软雅黑;font-size:7px">西藏拉萨市墨竹工卡县知不拉铜矿</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">英文名称：</span><span
            style="font-family:微软雅黑;font-size:7px">Zhibula Copper Deposit in MoZhugongka County,Lasa,Tibet</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">产地：</span><span
            style="font-family:微软雅黑;font-size:7px">拉萨市墨竹工卡县</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">省：</span><span
            style="font-family:微软雅黑;font-size:7px">西藏自治区</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">国家：</span><span
            style="font-family:微软雅黑;font-size:7px">中国</span><span style="font-family:微软雅黑;font-size:7px">&nbsp;</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">经度：</span><span
            style="font-family:微软雅黑;font-size:7px">E91°35＇30＂</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">纬度：</span><span
            style="font-family:微软雅黑;font-size:7px">N29°42＇36＂</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">高程：</span><span
            style="font-family:微软雅黑;font-size:7px">5500m</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">区域地质背景：</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;font-size:7px"><span
              style="font-family:微软雅黑">冈底斯是我国规模最大的铜矿带，发现了</span>10余处大型、超大型矿床，包括我国最大的铜矿--驱龙斑岩型Cu-Mo以及甲玛复合型Cu-Mo-Au-Pb-Zn矿床。知不拉矽卡岩型铜矿床处于该成矿带的东段，位于西藏墨竹工卡县甲玛乡境内，距驱龙矿床南约2km，其大地构造位置处于冈底斯一念青唐古拉板片次级构造单元一冈底斯陆缘火山一岩浆弧东段。区内岩浆具有多期活动特征，与雅鲁藏布江洋盆的俯冲、消亡以及印度与欧亚板块碰撞造山密切相关，大致可分为4期，包括早侏罗世叶巴组弧火山岩及同时期弧花岗岩、晚白垩世俯冲型花岗岩、古新世-始新世林子宗火山岩及同时期碰撞型花岗岩、渐新世中新世与区内大规模斑岩型铜矿密切相关的斑岩及花岗岩。区内构造为近E-W，而主要控矿构造为NE的复合型断裂带，分布在拉萨日多弧内盆地的南部边缘，并具有多期性和继承性活动的特点。</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">矿区地质：</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;font-size:7px"><span
              style="font-family:微软雅黑">冈底斯是我国规模最大的铜矿带，发现了</span>10余处大型、超大型矿床，包括我国最大的铜矿-一驱龙斑岩型Cu-Mo以及甲玛复合型Cu-Mo-Au-Pb-Zn矿床。知不拉矽卡岩型铜矿床处于该成矿带的东段，位于西藏墨竹工卡县甲玛乡境内，距驱龙矿床南约2km，其大地构造位置处于冈底斯一念青唐古拉板片次级构造单元一冈底斯陆缘火山一岩浆弧东段。区内岩浆具有多期活动特征，与雅鲁藏布江洋盆的俯冲、消亡以及印度与欧亚板块碰撞造山密切相关，大致可分为4期，包括早侏罗世叶巴组弧火山岩及同时期弧花岗岩、晚白垩世俯冲型花岗岩、古新世-始新世林子宗火山岩及同时期碰撞型花岗岩、渐新世中新世与区内大规模斑岩型铜矿密切相关的斑岩及花岗岩。区内构造为近E-W，而主要控矿构造为NE的复合型断裂带，分布在拉萨一日多弧内盆地的南部边缘，并具有多期性和继承性活动的特点。</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">矿床地质：</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;font-size:7px"><span
              style="font-family:微软雅黑">矿体：西藏巨龙铜业有限公司</span>2011年补充勘探工作方案显示知不拉矿区主要有1、II、II、IV号矿体，主要呈层状、似层状，少量透镜状、囊状赋存于叶巴组凝灰岩与大理岩层间，部分受断层控制（如III号矿体）。</span>
        </p>
        <p>
          <span
            style="font-family:微软雅黑;font-size:7px">矿石：矿石类型主要有黄铜矿一磁铁矿矿石、黄铜矿一斑铜矿矿石、斑铜矿矿石、黄铜矿一黄铁矿矿石、黄铜矿一方铅矿一闪锌矿矿石，呈浸染状、块状、团块状、斑杂状、网脉和细脉状。矿石结构主要有结晶结构、交代残余结构、填隙结构、交代乳浊状结构、骸晶结构、反应边结构、固溶体分离结构、共生边结构。金属矿物主要以黄铜矿、斑铜矿为主，磁铁矿、辉钼矿、黄铁矿、方铅矿、闪锌矿、磁黄铁矿次之，另见少量的辉铜矿、赤铁矿、毒砂等；非金属矿物主要以石榴子石、透辉石为主，绿帘石、硅灰石、方解石、石英次之，另见少量的透闪石、阳起石、绿泥石、绢云母等。</span>
        </p>
        <p>
          <span
            style="font-family:微软雅黑;font-size:7px">围岩蚀变：矿区围岩蚀变广泛发育，主要有矽卡岩化、硅化、碳酸盐化、绿泥石化等，其中以矽卡岩化、硅化与成矿关系最为密切。矽卡岩发育于凝灰岩与大理岩接触部位及构造破碎带内，少部分发育于凝灰岩中或岩体与碳酸盐岩接触带。</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">矿床成因：</span><span
            style="font-family:微软雅黑;font-size:7px">属于岩浆热液接触交代作用形成的层状矽卡岩型矿床</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;color:rgb(0,112,192);font-size:7px">参考文献：</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;font-size:7px"><span
              style="font-family:微软雅黑">徐净，郑有业，孙祥，等</span>.西藏知不拉矽卡岩型铜矿床矿物学特征及地质意义［J］.地球科学（中国地质大学学</span>
        </p>
        <p>
          <span style="font-family:微软雅黑;font-size:7px"><span
              style="font-family:微软雅黑">报），</span>2014（6）：654-670,768．DOI：10.3799／dqkx．2014.062．</span>
        </p>
        <p>
          <br />
        </p>
      </div>
    </div>
  </div>
  <script>
    var oHtml = document.getElementsByTagName('html')[0]
    var width = oHtml.offsetWidth
    if (width >= 750) {
      width = 750
    }
    oHtml.style.fontSize = width / 10 + 'px'
  </script>
  <script>
    var ul = document.querySelector('.nav ul')
    var li = document.querySelectorAll('.nav ul li')
    var content = document.querySelectorAll('.content>div')
    ul.addEventListener('click', function (e) {
      for (var i = 0; i < li.length; i++) {
        li[i].classList.remove('current')
        li[i].setAttribute('index', i);
        content[i].classList.remove('active')
      }
      const target = e.target
      target.classList.add('current')
      content[target.getAttribute('index')].classList.add('active')
    })
  </script>
  <script type="importmap">
    {
            "imports": {
                "three": "./js/three.module.js"
            } 
        }
    </script>
  <script type="module">
    import * as THREE from './js/three.module.js';
        import { GUI } from './js/dat.gui.module.js';
        import { DRACOLoader } from './js/DRACOLoader.js';
        import { GLTFLoader } from './js/GLTFLoader.js';
        import { OrbitControls } from './js/OrbitControls.js';
        import { MeshoptDecoder } from './js/meshopt_decoder.module.js';
        var container;
            
        //相机
        var camera;
            
        function initCamera() 
        {
          container = document.getElementById('container')
            camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
            camera.position.set(120, 20, 120);
            camera.lookAt(new THREE.Vector3(0,0,0));
        }
        
        //渲染
        var renderer;
        function initRender() 
        {
            renderer = new THREE.WebGLRenderer({antialias:true, powerPreference: "high-performance"});
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true
            renderer.shadowMap.type = THREE.PCFSoftShadowMap
            renderer.setClearColor(0xffffff);
            container.appendChild(renderer.domElement);
        }
        
        //场景
        var scene;
        function initScene() 
        {
            scene = new THREE.Scene();
        }
        
        //灯光
        var light;
        function initLight() 
        {
            scene.add(new THREE.AmbientLight(0xffffff));
            light = new THREE.PointLight(0xffffff,0.5);
            light.position.set(100,100,100);
            light.castShadow = true;
            scene.add(light);
        }

        //创建LOD
        var lod = new THREE.LOD();
        
        //导入模型1
        function initModel1() 
        {
            var loader = new GLTFLoader();
            var dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath('./js/draco/');
            dracoLoader.preload();
            loader.setDRACOLoader(dracoLoader);
            loader.load('./3/sparse1.glb' , function ( gltf ) {
                gltf.scene.position.set(0, 0,0);
                gltf.scene.scale.set(20,20,20);
                lod.addLevel(gltf.scene, 210);
                //scene.add( gltf.scene );
            })
        }
        
        //导入模型2
        function initModel2() 
        {
            var loader = new GLTFLoader();
            var dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath('./js/draco/');
            dracoLoader.preload();
            loader.setDRACOLoader(dracoLoader);
            loader.load('./3/sparse2.glb' , function ( gltf ) {
                gltf.scene.position.set(0, 0,0);
                gltf.scene.scale.set(20,20,20);
                lod.addLevel(gltf.scene, 170);
                //scene.add( gltf.scene );
            })
        }
        
        //导入模型3
        function initModel3() 
        {   
            var loader = new GLTFLoader();
            loader.setMeshoptDecoder(MeshoptDecoder);
            loader.load('./3/sparse3.glb' , function ( glb ) {
                glb.scene.position.set(0, 0,0);
                glb.scene.scale.set(20,20,20);
                lod.addLevel(glb.scene, 130);
                //scene.add( glb.scene );
            })
        }
        
        //导入模型4
        function initModel4() 
        {   
            var loader = new GLTFLoader();
            loader.setMeshoptDecoder(MeshoptDecoder);
            loader.load('./3/sparse4.glb' , function ( glb ) {
                glb.scene.position.set(0, 0, 0);
                glb.scene.scale.set(20,20,20);
                lod.addLevel(glb.scene, 90);
                //scene.add( glb.scene );
            })
        }
        
        //gui调试器
        var gui;
        function initGui()
        {
            gui = new GUI({width:200});
            gui.add(controls, 'autoRotate');
                
        }
        
        //交互插件 
        var controls;
        function initControls() 
        {
            controls = new OrbitControls(camera, renderer.domElement);
            controls.autoRotate = true;
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;
            controls.minDistance  = 40;
            controls.maxDistance  = 300;
        }
        
        function render() 
        {
            scene.add(lod);
            var vector = camera.position.clone();
            light.position.set(vector.x,vector.y,vector.z); 
            renderer.render(scene, camera);
        }
        
        //窗口变动触发的函数，窗口发生变动时，让弹出的窗体自动居中
        function onWindowResize() 
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            render();
            renderer.setSize(window.innerWidth, window.innerHeight);
        
        }
        
        function animate() 
        {
            render();
            lod.update(camera);
            controls.update();
            requestAnimationFrame(animate);
        }
            
        initCamera();
        initRender();
        initScene();
        initLight();
        initModel1();
        initModel2();
        initModel3();
        initModel4();
        initControls();
        initGui();
        animate();
        window.onresize = onWindowResize;
    </script>
</body>

</html>